<template>
  <div class="vipmangeadd">
    <div class="outmain ba_f heighthv pad_20 bor_rad5">
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>基本信息</span>
        </div>
      </div>
      <el-form ref="form" :model="form" label-width="180px">
      <div class="mar_t20 flex-bet flex-y-top">
        <div class="flex-g-1">
            <el-form-item label="等级名称" :required='true' prop="name">
              <el-input v-model="form.name" placeholder="请输入等级名称"></el-input>
            </el-form-item>
            <el-form-item label="等级背景">
              <el-radio-group v-model="form.bgType">
                <el-radio label="1">背景色</el-radio>
                <el-radio label="2">背景图</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="背景色" v-show="form.bgType=='1'">
              <el-color-picker v-model="form.color"></el-color-picker>
            </el-form-item>
            <el-form-item label="背景图" v-show="form.bgType=='2'">
              <div class="uploadSource bor_de rel flex" v-if="form.bgImg">
                <label class="statusLabel curs" @mouseenter="enter(1)" @mouseleave="leave(1)">
                  <i class="el-icon-check" ref="imgicon1"></i>
                  <i class="el-icon-close" @click="deleteMultiImage(form.bgImg,1)"></i>
                </label>
                <img :src="form.bgImg" @click='test(1)' class="wid"/>
              </div>
              <div class="uploadSource flex-center curs" v-else @click='test(1)'>
                <i class="el-icon-plus fon_40 color_d9"></i>
              </div>
              <div class="yb_margin">建议尺寸：1000*600像素</div>
            </el-form-item>
            <el-form-item label="获得条件" :required='true' v-if="this.form.level!='1'">
              <el-input v-model="form.condition" placeholder="请输入成长值"></el-input>
              <span class="mar_l10">成长值</span>
              <div class="yb_margin lh16">修改等级所需成长值后，部分客户会因无法达到该成长值要求而发生会员等级的变化</div>
            </el-form-item>
        </div>
        <div class="flex-g-0 pad_lr_20">
          <div class="cardshow" :style="{background:(form.bgType==1?form.color:form.bgImg && 'url(' + form.bgImg + ') center center / cover no-repeat')}">
            <div class="cardbg"></div>
            <div class="fon_18 lh22 wei">{{form.name}}</div>
            <div class="mar_t20" v-if="this.form.level!='1'">
              <span class="mar_r10 fon_26">{{form.condition}}</span>
              <span>成长值</span>
            </div>
            <div class="line">
              <div class="lineright"></div>
            </div>
            <div class="mar_t20 fon_12">{{form.name}}</div>
          </div>
          <div class="yb_margin lh16 t_c">仅为预览，实际以用户查看时为准</div>
        </div>
      </div>
        <div class="shuju_title mar_b20">
          <div class="shuju_title_text">
            <span>权益礼包</span>
          </div>
        </div>
        <el-form-item label="会员权益">
          <div class="">
            <div class="mar_lr10">
              <el-checkbox-group v-model="form.rights">
                <el-checkbox v-for="label in rightsList" :label="label.id" :key="label.id">{{label.name}}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="当面付折扣">
          <div class="t_l numberInput">
            <div class="mar_lr10">
              <el-checkbox-group v-model="form.isCashier">
                <el-checkbox true-label="1" false-label="2">会员折扣</el-checkbox>
              </el-checkbox-group>
            </div>
            <div v-show="form.isCashier=='1'">
              <el-input-number v-model="form.cashierDiscount" controls-position="right" :min="0.01" :max="99999999"
                               class=""></el-input-number>
              <span class="mar_l10">折</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="升级礼包">
            <div class="">
              <div class="mar_lr10">
                <el-checkbox-group v-model="form.isCoupon">
                  <el-checkbox true-label="1" false-label="2">赠送优惠券</el-checkbox>
                </el-checkbox-group>
              </div>
              <div v-show="form.isCoupon=='1'" class="flex">
                <el-select v-model="form.coupon" multiple filterable placeholder="请选择优惠券">
                  <el-option v-for="item in comgrouping" :key="item.id" :label="item.name"
                             :value="item.id"></el-option>
                </el-select>
              </div>
            </div>
            <div class="t_l numberInput">
              <div class="mar_lr10">
                <el-checkbox-group v-model="form.isBalance">
                  <el-checkbox true-label="1" false-label="2">赠送余额</el-checkbox>
                </el-checkbox-group>
              </div>
              <div v-show="form.isBalance=='1'">
                <el-input-number v-model="form.balance" controls-position="right" :min="0.01" :max="99999999"
                                 class=""></el-input-number>
                <span class="mar_l10">元</span>
              </div>
            </div>
            <div class="t_l numberInput">
              <div class="mar_lr10">
                <el-checkbox-group v-model="form.isIntegral">
                  <el-checkbox true-label="1" false-label="2">赠送积分</el-checkbox>
                </el-checkbox-group>
              </div>
              <div v-show="form.isIntegral=='1'">
                <el-input-number v-model="form.integral" controls-position="right" :min="1" :max="99999999"
                                 class=""></el-input-number>
                <span class="mar_l10">积分</span>
              </div>
            </div>
            <div class="t_l numberInput">
              <div class="mar_lr10">
                <el-checkbox-group v-model="form.isGrowth">
                  <el-checkbox true-label="1" false-label="2">赠送成长值</el-checkbox>
                </el-checkbox-group>
              </div>
              <div v-show="form.isGrowth=='1'">
                <el-input-number v-model="form.growth" controls-position="right" :min="1" :max="99999999"
                                 class=""></el-input-number>
                <span class="mar_l10">成长值</span>
              </div>
            </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="mar_t20 ba_f pad_20 t_c">
      <el-button type="primary" @click="submitForm">立即创建</el-button>
    </div>
    <attachment-img ref="img1" type="img" @attachment='imgadd1'></attachment-img>
  </div>
</template>
<script>
import {postSaveLevel, getSaveLevel, getSelectCoupon} from "@/api/user";
  import attachmentImg from "@/plugins/attachment-img";
  export default {
    created() {
      if (this.$route.query.level) {
        this.form.level = this.$route.query.level
      }
      // if (this.$route.query.id) {
      //   this.form.id = this.$route.query.id
      // }
      this.getSaveLevel()
      this.getSelectCoupon()
    },
    components: {attachmentImg,},
    data () {
      return {
        form: {
          level: '',
          name: '',
          color: '#E2A850',
          bgImg: '',
          bgType: '1',
          condition:'0',
          rights:[],
          isBalance: '2',
          isIntegral: '2',
          isGrowth: '2',
          isCoupon: '2',
          balance: '',
          integral: '',
          growth: '',
          coupon:[],
          cashierDiscount: '',
          isCashier: '',
        },
        checkedCities:[],
        rightsList:[],
        comgrouping:[],
      }
    },
    methods: {
      async getSelectCoupon(){
        const {data} = await getSelectCoupon()
        this.comgrouping = data?data:[]
      },
      async getSaveLevel() {
        const {data} = await getSaveLevel({level:this.form.level?this.form.level:''})
        if(data.id){
          this.form = Object.assign({}, data);
        }
        this.rightsList = data.rightsList
      },
      async submitForm() {
        this.$refs["form"].validate(async (valid) => {
          if (valid) {
            const selectOperation = this.rightsList && this.rightsList.map((item) => item.id);
            this.form.rights = this.getArrEqual(selectOperation, this.form.rights);
            const {msg} = await postSaveLevel(this.form);
            this.$baseMessage(msg, "success");
            this.$router.push({path: 'vipmange'})
          } else {
            return false;
          }
        });
      },
      getArrEqual(arr1, arr2) {
        let newArr = [];
        for (let i = 0; i < arr2.length; i++) {
          for (let j = 0; j < arr1.length; j++) {
            if (arr1[j] === arr2[i]) {
              newArr.push(arr1[j]);
            }
          }
        }
        return newArr;
      },
      enter(i=0){
        this.$refs['imgicon' + i].style.display = 'none'
      },
      leave(i=0){
        this.$refs['imgicon' + i].style.display = 'inline-block'
      },
      test(i = 0) {
        this.$refs['img' + i].dialogVisible = true
      },
      imgadd1(url) {
        this.form.bgImg = url.str
      },
      deleteMultiImage(item, index, type) {
        //typem没传是单图multigraph多图；index上传图片组件排序
        Array.prototype.remove = function (val) {
          var index = this.indexOf(val);
          if (index > -1) {
            this.splice(index, 1);
          }
        };
        if (type == 'multigraph') {
          switch (index) {
            case 2:
              this.form2.environment.remove(item);
              break
          }
        } else {
          switch (index) {
            case 1:
              this.form.bgImg = '';
              break
          }
        }
      },
    }
  }
</script>
<style lang="scss">
  .vipmangeadd{
    .cardshow{
      width: 343px;
      height: 180px;
      border-radius: 12px;
      padding: 17px 20px;
      color: #fff;
      position: relative;
      overflow: visible;
      background: linear-gradient(30deg, rgb(242, 195, 121) 0%, rgb(226, 168, 80) 100%);
      .cardbg{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: url(../../assets/img/user/cardbg.png) center center / cover no-repeat;
      }
      .line{
        margin-top: 20px;
        width: 100%;
        height: 2px;
        background-color: hsla(0,0%,100%,.2);
        overflow: hidden;
        .lineright{
          background-color: #fff;
          height: 100%;
          width: 70%;
          transition: width .3s linear;
        }
      }
    }
  }
</style>
